<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">

<title>索尔云员工信息系统</title>

<style type="text/css">

.fade-enter-active, .fade-leave-active {
  transition: width .5s;
}
.fade-enter, .fade-leave-to{
  width: 0;
  
}


</style>

</head>
<body>

<!-- 
	认识Vue 
	Vue是一个基于MVVM的javaScript框架
	M:模型（数据）
	V:视图（界面）
	VM:视图模型，负责将模型转换为视图
	
	Vue的特点：数据与界面绑定，改变界面只需改变数据，甚至提供部分反向绑定（界面改变导致数据改变）

-->


<div id="app">

	<input type="text" v-model="info" />
	<button type="button" @click="fn" ref="bn" >按钮</button>
	{{info}}

</div>


<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>

<script type="text/javascript">

new Vue({
	el:'#app',//说明本vue对象绑定了id为app元素
	data:{//为本Vue对象定义数据
		info:'大家好！',
		count:0
	},
	methods:{//为本Vue对象定义方法（函数）
		fn(){
			this.count++;
			if(this.count==1){
				alert('不要点我');
			}else if(this.count==2){
				alert('你还点，再点，我生气了！');
			}else if(this.count==3){
				alert('我不和你玩了');
				this.$refs.bn.style.width='300px';
				this.$refs.bn.style.height='300px';
				this.$refs.bn.style.borderRadius='150px';
				this.$refs.bn.style.backgroundColor='red';
				this.$refs.bn.style.fontSize='50px';
				this.$refs.bn.style.outline='none';
				this.$refs.bn.style.color='yellow';				
				this.$refs.bn.innerHTML='火';
				
				//1000毫秒后按钮消失
				setTimeout(()=>{
					this.$refs.bn.style.display='none';
				},1000);
				
			}
			
		}
	}
	
	
});

</script>



</body>
</html>






